<template>
  <view class="loading-container u-display">
    <image src="/static/index/loading.png" mode="widthFix"></image>
    <view class="fontsize28 u-f-ac" style="color: #3D9FEA;font-size: 48px;">loading
      <view class="translate-circle">
        <view class="circle"></view>
        <view class="circle"></view>
        <view class="circle"></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showLoadModel: false,
      };
    },
    methods: {
      showModel() {
        this.showLoadModel = true;
      },
      closeModel() {
        this.showLoadModel = false;
      }
    }
  }
</script>

<style lang="scss">
  .loading-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background: #F5F6FA;

    .translate-circle {
      display: flex;
      margin-left: px2vw(20);

      .circle {
        flex: 1;
        margin-left: px2vw(10);
        height: px2vw(12);
        width: px2vw(12);
        border-radius: 50%;
        background-color: #3D9FEA;
        &:nth-child(1) {
          animation: translate-line1 1s infinite;
          animation-delay: 0.48s;
        }

        &:nth-child(2) {
          animation: translate-line1 1s infinite;
          animation-delay: 0.6s;
        }

        &:nth-child(3) {
          animation: translate-line1 1s infinite;
          animation-delay: 0.72s;
        }


      }
    }
    @keyframes translate-line1 {
    
    	30%,
    	50% {
    		transform: scale(1.2);
    	}
    
    	100% {
    		transform: scale(0.8);
    	}
    }
  }

  .nothing image {
    width: 30%;
  }

  .u-display {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
</style>
